<template>
  <div class='wy-main matching-waybill'>
   <a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >我的开单</span>
					<a-button class="title-button">创建运单</a-button>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
    <a-row class="a-row-box">
      <a-col :span="22">
        <div class="search-cont">
          <a-row
            type="flex"
            justify="space-around"
            align="middle"
            class="search-a-row"
          >
            <a-col :span="4" style="padding-left:20px;">
              <label for="">订单编号&nbsp; &nbsp; &nbsp;</label>
              <a-input class="search-input" />
            </a-col>
            <a-col :span="8" style="padding-left:80px;">
              <a-input
                class="search-input"
                placeholder="请选择出发地"
              />
              ——>
              <a-input
                class="search-input"
                placeholder="请选择到达地"
              />
            </a-col>
            <a-col :span="8">
              <label for="">开单时间 &nbsp; &nbsp; &nbsp;</label>
              <a-input class="search-input" />
              ——
              <a-input class="search-input" />
            </a-col>
            <a-col :span="4">
              <a-button
                type="primary"
              >
                搜索
              </a-button>
              <a-button
                :style="{ marginLeft: '8px' }"
              >
                清空
              </a-button>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
    <a-row class="a-row-box">
      <a-col :span="22">
        <a-table
          class="a-table"
          :rowSelection="rowSelection"
          :columns="columns"
          :dataSource="data"
        >
        	<span slot="operation" slot-scope="text, record">
		      <a href="javascript:;">查看/修改</a>
		      <a-divider type="vertical" />
		      <a href="javascript:;">删除</a>
		    </span>
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>
<script>
const columns = [
  {
    title: '订单编号',
    dataIndex: 'name',
  },
  {
    title: '出发地 ——> 到达地',
    dataIndex: 'age',
    width: "150px"
  },
  {
    title: '开单日期',
    dataIndex: 'address1',
  },
  {
    title: '总费用(元)',
    dataIndex: 'address2',
  },
  {
    title: '业务提成(元)',
    dataIndex: 'address3',
  },
  {
    title: '发货人(元)',
    dataIndex: 'address4',
  },
  {
    title: '收款方式',
    dataIndex: 'address5',
  },
  {
   	title: '操作',
		key: 'operation',
		scopedSlots: {
			customRender: 'operation'
		},
  },
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address1: `London, Park Lane no. ${i}`,
    address2: `London, Park Lane no. ${i}`,
    address3: `London, Park Lane no. ${i}`,
    address4: `London, Park Lane no. ${i}`,
    address5: `London, Park Lane no. ${i}`,
  });
}
export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created() { },
  components: {
    // Footer
  },
  watch: {},

  mounted: function () {

  },
  computed: {
  	handleReset(){
  		
  	},
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          }
        }),
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.matching-waybill {
  .a-row-box {
    padding-left: 10px;
  }
  .a-table,
  .search-cont {
    width: 100%;
    border: 1px solid #ccc;
  }
  .search-cont {
    height: 100px;
    margin-bottom: 20px;
    .search-a-row {
      height: 100%;
      .search-input {
        width: 120px;
      }
    }
  }

  // .a-col-input {
  //   width: 200px;
  // }
  // .a-col-time {
  //   width: 150px;
  // }
  // .ant-advanced-search-form {
  //   height: 100px;
  //   border: 1px solid #ccc;
  //   .a-col {
  //     padding-top: 20px;
  //   }
  // }
}
</style>